<template>
	<div class="page">
		<div style="padding: 10px;padding-bottom: 0px;">
			<el-collapse accordion>
				<el-collapse-item>
					<template slot="title">
						高级搜索
					</template>
					<el-form :inline="true" :model="condition" class="demo-form-inline">
						<el-form-item label="标题">
							<el-input v-model="condition.title" size="small" placeholder="标题"></el-input>
						</el-form-item>
						<el-form-item label="软文类型">
							<el-select v-model="condition.type" placeholder="请选择软文类型" size="small">
								<el-option v-for="item in roles" :key="item.enumCode" :label="item.enumName" :value="item.enumCode">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="描述">
							<el-input v-model="condition.desc" size="small" placeholder="描述"></el-input>
						</el-form-item>
						<el-form-item>
							<el-button class="el-main-color" icon="el-icon-search" size="mini" @click="search()">查询</el-button>
							<el-button class="el-main-color" icon="el-icon-delete" size="mini" @click="clear()">清除</el-button>
						</el-form-item>
					</el-form>
				</el-collapse-item>
			</el-collapse>
		</div>
		<div class="tableAreas">
			<el-button class="el-main-color" icon="el-icon-plus" size="mini" @click="operation('','add')">新增软文</el-button>
			<div class="block" style="float: right;">
				<el-pagination @size-change="itemHandleSizeChange" @current-change="itemHandleCurrentChange" :current-page.sync="pageNo" :page-sizes="itemPageSizes" :page-size="pageSize" layout="sizes, prev, pager, next" :total="itemTotal">
				</el-pagination>
			</div>
			<el-table :data="items" border style="width: 100%">
				<el-table-column prop="title" label="标题" width="180">
				</el-table-column>
				<el-table-column prop="description" label="描述">
				</el-table-column>
				<el-table-column prop="" label="操作" width="180">
					<template slot-scope="scope">
						<el-button @click="operation(scope.row,'preview')" icon="el-icon-view" type="text" size="mini">预览</el-button>
						<el-button @click="operation(scope.row,'edit')" icon="el-icon-edit" type="text" size="mini">编辑</el-button>
						<el-button @click="operation(scope.row,'delete')" icon="el-icon-delete" type="text" size="mini">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<el-dialog title="软文预览" :visible.sync="dialogVisible">
			<div v-html="content" class="preview"></div>
		</el-dialog>
		<el-dialog title="软文新增" width="80%" :visible.sync="dialogAddVisible">
			<div class="editor-content">
				<div class="editor-title">
					<el-form ref="article" :model="article" label-width="70px" style="text-align: left;">
						<el-form-item label="标题">
							<el-input v-model="article.title" placeholder="标题"></el-input>
						</el-form-item>
						<el-form-item label="软文类型">
							<el-select v-model="article.type" placeholder="请选择软文类型" @change="typeChange(article.type)">
								<el-option v-for="item in roles" :key="item.enumCode" :label="item.enumName" :value="item.enumCode">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="二级类型" v-show="secondItems.length != 0">
							<el-select v-model="article.secondType" placeholder="请选择软文类型">
								<el-option v-for="item in secondItems" :key="item.enumCode" :label="item.enumName" :value="item.enumCode">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="描述">
							<el-input type="textarea" rows="4" placeholder="描述信息" v-model="article.description"></el-input>
						</el-form-item>
						<el-form-item label="附图" prop="">
							<el-upload class="avatar-uploader" :action="actionUrl" name="file" with-credentials :show-file-list="false" :on-progress="progress" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
								<img v-if="article.imageUrl" :src="article.imageUrl" class="avatar">
								<i v-else class="el-icon-plus avatar-uploader-icon"></i>
							</el-upload>
						</el-form-item>
					</el-form>
					<div slot="footer" class="dialog-footer" style="text-align: center;">
						<el-button type="primary" @click="submitForm()" size="small" :loading="newSaveButtonStatus">提交</el-button>
						<!--<el-button type="primary" @click="preview()" size="small">预览</el-button>-->
					</div>
				</div>
				<div class="quill">
					<vue-ueditor-wrap v-model="content" :config="UEdtorConfig"></vue-ueditor-wrap>
				</div>
			</div>
			<!--<el-dialog title="软文预览" :visible.sync="dialogVisible">
				<div v-html="content" class="preview"></div>
			</el-dialog>-->
		</el-dialog>
	</div>

</template>
<style>
	@import url("../../../common/common.css");
	@import url("quillEditorList.css");
</style>
<script>
	import $ from 'jquery'
	import VueUeditorWrap from 'vue-ueditor-wrap'

	export default {
		components: {
			VueUeditorWrap
		},
		data() {
			return {
				items: [],
				itemPageSizes: [5, 10, 15, 20],
				pageSize: 5,
				pageNo: 0,
				itemTotal: 0,
				content: '',
				dialogVisible: false,
				dialogAddVisible: false,
				condition: {
					type: '',
					title: '',
					desc: ''
				},
				roles: [],
				secondItems:[],
				article: {
					title: '',
					content:'<p>录入软文</p>',
					secondType:'',
					description: '',
					type: ''
				},
				actionUrl: this.utils.rootUrl + 'upload/uploadFile',
				dialogVisible: false,
				newSaveButtonStatus: false,
				content: '<p>录入</p>',
				UEdtorConfig: {
					// 如果需要上传功能,找后端小伙伴要服务器接口地址
					 serverUrl: this.utils.rootUrl + 'upload/config',
					// 你的UEditor资源存放的路径,相对于打包后的index.html
					UEDITOR_HOME_URL: './static/UEditor/',
					// 编辑器不自动被内容撑高
					autoHeightEnabled: false,
					// 初始容器高度
					initialFrameHeight: 240,
					// 初始容器宽度
					initialFrameWidth: '100%',
					// 关闭自动保存
					enableAutoSave: false
				}
			}
		},
		created() {
			this.getData();
			this.getRoleList();
		},
		mounted() {
			setTimeout(() => {
				this.content = '请录入软文'
			}, 3000)
		},
		methods: {
			operation(item, type) {
				var _self = this;
				if(type == 'preview') {
					this.content = item.content;
					this.dialogVisible = true;
				}
				if(type == 'edit') {
					this.dialogAddVisible = true;
					this.article = item;
					this.content = item.content;
					this.typeChange(item.type);
				}
				if(type == 'add') {
					this.dialogAddVisible = true;
					this.article = {
						title: '',
						description: '',
						type: ''
					}
				}

				if(type == 'delete') {
					this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						this.utils.ajaxJSON({
							type: 'DELETE',
							url: 'article/',
							data: item,
							success: function(res) { //若是parentCode == 0表示枚举项
								_self.deleteItem(_self.items, res.data);
								_self.$message({
									type: 'success',
									message: '删除成功!'
								});
							}
						});

					}).catch(() => {
						this.$message({
							type: 'info',
							message: '已取消删除'
						});
					});
				}
			},
			deleteItem(items, item) {
				for(var index in items) {
					if(items[index].id == item.id) {
						items.splice(index, 1);
					}
				}
			},
			search() {
				this.getData();
			},
			clear() {
				this.condition = {
					type: '',
					title: '',
					desc: ''
				}
			},
			itemHandleSizeChange(val) {
				console.log(`item每页 ${val} 条`);
				this.pageSize = val;
				this.getData();
			},
			itemHandleCurrentChange(val) {
				console.log(`item当前页: ${val}`);
				this.pageNo = val;
				this.getData();
			},
			getData() {
				var _self = this;
				_self.utils.ajaxJSON({
					type: 'POST',
					url: 'article/list?pageSize=' + _self.pageSize + '&pageNo=' + _self.pageNo,
					data: _self.condition,
					success: function(res) {
						console.log(res);
						if(res.status == 200) {
							_self.itemTotal = res.total;
							_self.items = res.dataList;
						}
					}
				});
			},
			onEditorBlur() { //失去焦点事件
			},
			onEditorFocus() { //获得焦点事件
			},
			onEditorChange() { //内容改变事件
			},
			preview() {
				this.dialogVisible = true;
			},
			handleAvatarSuccess(res, file) {
				//				this.userInfo.imageUrl = res.data.httpUrl;
				this.$set(this.article, 'imageUrl', this.utils.imageRootUrl + res.data.httpUrl)
//				this.userInfo.fileId = res.data.fileId;
			},
			beforeAvatarUpload(file) {
				//const isJPG = file.type === 'image/jpeg';
//				const isLt50k = file.size / 1024 < 50;
//				if(!isJPG) {
//					this.$message.error('上传头像图片只能是 JPG 格式!');
//				}
//				if(!isLt50k) {
//					this.$message.error('上传头像图片大小不能超过 50KB!');
//				}
//				return isLt50k;
				return true;
			},
			progress(event, file, fileList) {
				console.log(JSON.stringify(file))
			},
			submitForm() {
				this.newSaveButtonStatus = true;
				var _self = this;
				_self.article.content = _self.content;
				this.utils.ajaxJSON({
					type: 'post',
					url: 'article/',
					data: _self.article,
					success: function(res) {
						_self.newSaveButtonStatus = false;
						if(_self.article.id) {

						} else {
							_self.items.push(res.data)
						}
						_self.dialogAddVisible = false;
						_self.$message({
							type: 'success',
							message: '操作成功!'
						});
					}
				})
			},
			getRoleList: function() {
				var _self = this;
				var parentCode = 'llz08';
				_self.utils.ajaxJSON({
					type: 'POST',
					url: 'enum/enumList',
					data: {
						parentCode: parentCode
					},
					success: function(res) {
						console.log(res);
						if(res.status == 200) {
							_self.roles = res.dataList;
						}
					}
				});
			},
			typeChange(value){
				console.log(JSON.stringify(value));
				var _self = this;
				_self.utils.ajaxJSON({
					type: 'POST',
					url: 'enum/enumList',
					data: {
						parentCode: value
					},
					success: function(res) {
						if(res.status == 200) {
							_self.secondItems = res.dataList;
							if(_self.secondItems.length == 0){
								_self.article.secondType = '';
							}
						}
					}
				});
				
			}
		}
	}
</script>